import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title } = Typography;
const { TextArea } = Input;

export default function CustomerServiceReply() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const questionTypeRef = useRef<HTMLDivElement>(null);
  const replyStyleRef = useRef<HTMLDivElement>(null);
  const customerQuestionRef = useRef<HTMLDivElement>(null);
  const productNameRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'questionType',
      title: '选择问题类型',
      description: '选择客户咨询的问题类型，如产品咨询、订单查询等',
    },
    {
      key: 'replyStyle',
      title: '选择回复风格',
      description: '选择您想要的回复风格，如热情友好、专业高效等',
    },
    {
      key: 'customerQuestion',
      title: '输入客户问题（可选）',
      description: '输入客户的具体问题，以便生成更精准的回复',
    },
    {
      key: 'productName',
      title: '输入产品名称（可选）',
      description: '输入相关产品名称，使回复更具针对性',
    },
    {
      key: 'generateButton',
      title: '生成客服回复',
      description: '完成所有设置后，点击此按钮生成客服回复',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的回复内容',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    questionType: questionTypeRef,
    replyStyle: replyStyleRef,
    customerQuestion: customerQuestionRef,
    productName: productNameRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 生成客服回复的模拟函数
  const generateContent = (
    customerQuestion: string,
    questionType: string,
    productName: string,
    replyStyle: string,
    specialRequirements: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 开头问候
    if (replyStyle === '热情友好') {
      result += `${Math.random() > 0.5 ? '亲爱的顾客，您好！' : '您好，亲爱的顾客！'}😊\n\n`;
    } else if (replyStyle === '专业高效') {
      result += `${Math.random() > 0.5 ? '您好！' : '尊敬的顾客：'}我是${Math.random() > 0.5 ? '客服小助手' : '智能客服'}，很高兴为您服务。\n\n`;
    } else if (replyStyle === '亲切温和') {
      result += `${Math.random() > 0.5 ? '您好呀~' : '亲爱的顾客，下午好/上午好！'}很高兴为您解答问题。\n\n`;
    } else if (replyStyle === '幽默活泼') {
      result += `${Math.random() > 0.5 ? '嗨！亲~' : 'Hey，亲爱的小伙伴！'}看到您的问题啦，这就为您解答！🎉\n\n`;
    }

    // 根据问题类型生成回复
    if (questionType === '产品咨询') {
      if (productName) {
        result += `关于${productName}，它是我们的${Math.random() > 0.5 ? '明星产品' : '热销产品'}。${Math.random() > 0.5 ? '这款产品采用了' : '它使用了'}${Math.random() > 0.5 ? '最新技术' : '优质材料'}，具有${Math.random() > 0.5 ? '高性能' : '耐用性强'}、${Math.random() > 0.5 ? '设计精美' : '使用便捷'}等特点。\n\n`;
        result += `${Math.random() > 0.5 ? '它的主要功能包括' : '您可以用它来'}：${Math.random() > 0.5 ? '解决日常需求' : '提升生活品质'}，${Math.random() > 0.5 ? '满足不同场景的使用' : '为您的生活带来便利'}。\n\n`;
      } else {
        result += `${Math.random() > 0.5 ? '我们的产品种类丰富' : '我们有多种产品可供选择'}，每款产品都有其独特的特点和优势。${Math.random() > 0.5 ? '请问您对哪方面的产品感兴趣呢？' : '您可以告诉我您的具体需求，我会为您推荐合适的产品。'}\n\n`;
      }
    } else if (questionType === '订单查询') {
      result += `${Math.random() > 0.5 ? '关于您的订单' : '您的订单信息'}，${Math.random() > 0.5 ? '我已经为您查询到' : '目前状态是'}：${Math.random() > 0.5 ? '订单已发货，物流单号为：XXX，您可以通过快递公司官网查询实时物流信息' : '订单正在处理中，预计将在24小时内发货'}。\n\n`;
      result += `${Math.random() > 0.5 ? '如果您想了解更多订单详情' : '如有其他订单相关问题'}，${Math.random() > 0.5 ? '请提供您的订单号' : '可以随时联系我们'}，${Math.random() > 0.5 ? '我将为您提供更详细的信息' : '我们会及时为您处理'}。\n\n`;
    } else if (questionType === '物流问题') {
      result += `${Math.random() > 0.5 ? '非常抱歉' : '很抱歉'}给您带来不便！${Math.random() > 0.5 ? '关于物流问题' : '针对您反映的物流情况'}，${Math.random() > 0.5 ? '我们已经联系快递公司进行查询' : '我们会尽快与物流部门核实'}。\n\n`;
      result += `${Math.random() > 0.5 ? '请您稍等片刻' : '预计1-2个小时内'}，${Math.random() > 0.5 ? '我们会给您一个满意的答复' : '我们会更新物流信息并通知您'}。${Math.random() > 0.5 ? '感谢您的理解和耐心等待' : '请您耐心等待'}。\n\n`;
    } else if (questionType === '退换货申请') {
      result += `${Math.random() > 0.5 ? '关于您的退换货申请' : '针对您的退换货需求'}，${Math.random() > 0.5 ? '我们非常重视' : '我们会尽快处理'}。${Math.random() > 0.5 ? '根据我们的退换货政策' : '按照流程'}，${Math.random() > 0.5 ? '请您先在订单页面提交退换货申请' : '您需要提供商品问题的照片或视频'}，${Math.random() > 0.5 ? '我们会在24小时内审核' : '我们会在收到信息后尽快处理'}。\n\n`;
      result += `${Math.random() > 0.5 ? '审核通过后' : '后续'}，${Math.random() > 0.5 ? '我们会为您安排退货或换货事宜' : '请按照系统提示完成后续操作'}。${Math.random() > 0.5 ? '如有任何疑问' : '如果您有其他问题'}，请随时联系我们。\n\n`;
    } else if (questionType === '退款问题') {
      result += `${Math.random() > 0.5 ? '关于您的退款申请' : '针对您的退款需求'}，${Math.random() > 0.5 ? '我们已经受理' : '我们正在处理'}。${Math.random() > 0.5 ? '根据银行处理流程' : '通常情况下'}，${Math.random() > 0.5 ? '退款会在1-7个工作日内原路返回您的支付账户' : '退款将在3-5个工作日内到账'}。\n\n`;
      result += `${Math.random() > 0.5 ? '请您注意查收' : '届时请查看您的账户余额'}。${Math.random() > 0.5 ? '如有延迟' : '如果超过预计时间仍未收到退款'}，${Math.random() > 0.5 ? '请及时联系我们' : '请提供您的订单信息，我们会为您核实处理'}。\n\n`;
    } else if (questionType === '投诉建议') {
      result += `${Math.random() > 0.5 ? '非常感谢' : '感谢'}您的反馈和建议！${Math.random() > 0.5 ? '您的意见对我们来说非常重要' : '我们非常重视您的想法'}，${Math.random() > 0.5 ? '这将帮助我们不断改进和提升服务质量' : '这是我们进步的动力'}。\n\n`;
      result += `${Math.random() > 0.5 ? '我们已经将您的建议反馈给相关部门' : '我们会认真研究您的投诉内容'}，${Math.random() > 0.5 ? '并尽快给您一个满意的答复' : '并采取相应措施进行改进'}。${Math.random() > 0.5 ? '再次感谢您的理解和支持' : '感谢您的耐心和配合'}！\n\n`;
    } else if (questionType === '优惠活动') {
      result += `${Math.random() > 0.5 ? '很高兴为您介绍' : '关于我们的优惠活动'}！${Math.random() > 0.5 ? '目前我们正在进行' : '近期我们有'}${Math.random() > 0.5 ? '限时折扣' : '满减优惠'}、${Math.random() > 0.5 ? '买一送一' : '新人专享礼包'}等活动。\n\n`;
      if (productName) {
        result += `${productName}${Math.random() > 0.5 ? '也参与了此次活动' : '目前有特别优惠'}，${Math.random() > 0.5 ? '您可以在活动期间享受XX折优惠' : '购买即送精美礼品'}。${Math.random() > 0.5 ? '活动时间有限' : '优惠数量有限'}，${Math.random() > 0.5 ? '建议您尽快下单' : '先到先得哦'}！\n\n`;
      } else {
        result += `${Math.random() > 0.5 ? '您可以关注我们的官网或APP' : '建议您查看我们的活动页面'}，了解更多优惠详情。${Math.random() > 0.5 ? '如有具体想了解的产品' : '如果您对特定产品感兴趣'}，${Math.random() > 0.5 ? '可以告诉我' : '请随时咨询'}，${Math.random() > 0.5 ? '我会为您查询具体的优惠信息' : '我会为您提供详细的活动内容'}。\n\n`;
      }
    }

    // 针对具体问题内容的回复
    if (customerQuestion) {
      // 根据问题内容中的关键词生成更具体的回复
      if (customerQuestion.includes('什么时候发货') || customerQuestion.includes('发货时间')) {
        result += `${Math.random() > 0.5 ? '关于发货时间' : '通常情况下'}，${Math.random() > 0.5 ? '我们会在订单支付成功后48小时内发货' : '订单会在1-2个工作日内发出'}。${Math.random() > 0.5 ? '如有特殊情况' : '节假日可能会略有延迟'}，${Math.random() > 0.5 ? '我们会提前通知您' : '请您谅解'}。\n\n`;
      } else if (customerQuestion.includes('质量问题') || customerQuestion.includes('坏了')) {
        result += `${Math.random() > 0.5 ? '对于产品质量问题' : '非常抱歉产品出现了问题'}，${Math.random() > 0.5 ? '我们深表歉意' : '给您带来的不便我们深感抱歉'}。${Math.random() > 0.5 ? '请您提供产品问题的照片或视频' : '请您描述具体的问题情况'}，${Math.random() > 0.5 ? '我们会为您安排退换货或维修' : '我们会尽快为您解决问题'}。\n\n`;
      } else if (customerQuestion.includes('怎么使用') || customerQuestion.includes('使用方法')) {
        result += `${Math.random() > 0.5 ? '关于产品的使用方法' : '产品的使用步骤'}，${Math.random() > 0.5 ? '您可以参考随附的说明书' : '我们的官网有详细的使用教程'}，${Math.random() > 0.5 ? '或者我也可以为您简单介绍一下' : '您也可以观看我们的教学视频'}。${Math.random() > 0.5 ? '如果您还有其他疑问' : '如有任何不清楚的地方'}，${Math.random() > 0.5 ? '随时可以问我' : '请随时咨询'}。\n\n`;
      }
    }

    // 特殊要求
    if (specialRequirements) {
      result += `${Math.random() > 0.5 ? '关于您的特殊要求' : '针对您提到的情况'}，${Math.random() > 0.5 ? '我们已经记录' : '我们会特别关注'}，${Math.random() > 0.5 ? '并会尽力满足您的需求' : '并妥善处理'}。${Math.random() > 0.5 ? '如有需要' : '如果有任何进展'}，${Math.random() > 0.5 ? '我们会及时与您联系' : '我们会第一时间通知您'}。\n\n`;
    }

    // 结尾问候
    if (replyStyle === '热情友好') {
      result += `${Math.random() > 0.5 ? '希望以上回答能够帮助到您' : '不知道是否解决了您的问题'}！${Math.random() > 0.5 ? '如果还有其他疑问' : '如果您还有任何问题'}，${Math.random() > 0.5 ? '请随时告诉我' : '欢迎继续咨询'}。${Math.random() > 0.5 ? '祝您购物愉快！' : '祝您生活愉快！'}😊\n`;
    } else if (replyStyle === '专业高效') {
      result += `${Math.random() > 0.5 ? '以上是为您提供的解答' : '希望我的回答能够帮到您'}。${Math.random() > 0.5 ? '如有其他问题' : '如需进一步帮助'}，${Math.random() > 0.5 ? '请随时联系我们' : '欢迎继续咨询'}。\n${Math.random() > 0.5 ? '客服团队' : '智能客服'}`;
    } else if (replyStyle === '亲切温和') {
      result += `${Math.random() > 0.5 ? '不知道这样的回答您是否满意' : '希望能够解决您的问题'}~ ${Math.random() > 0.5 ? '如果还有什么可以帮助您的' : '如果您需要更多帮助'}，${Math.random() > 0.5 ? '随时欢迎再来找我' : '请随时告诉我'}哦~ 😊\n`;
    } else if (replyStyle === '幽默活泼') {
      result += `${Math.random() > 0.5 ? '搞定！希望能帮到你~' : '问题解决啦！开心~'} 如果还有其他问题，随时call我哦！🤗\n`;
    }

    // 免责声明
    result += `\n\n*本回复由智能客服自动生成，如有特殊需求，请联系人工客服进行个性化处理。*`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { customerQuestion, questionType, productName, replyStyle, specialRequirements } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(customerQuestion, questionType, productName, replyStyle, specialRequirements);
      setGeneratedContent(generated);
      message.success('客服回复生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '客服回复.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 问题类型选项
  const questionTypeOptions = [
    { label: '产品咨询', value: '产品咨询' },
    { label: '订单查询', value: '订单查询' },
    { label: '物流问题', value: '物流问题' },
    { label: '退换货申请', value: '退换货申请' },
    { label: '退款问题', value: '退款问题' },
    { label: '投诉建议', value: '投诉建议' },
    { label: '优惠活动', value: '优惠活动' },
    { label: '其他问题', value: '其他问题' },
  ];

  // 回复风格选项
  const replyStyleOptions = [
    { label: '热情友好', value: '热情友好' },
    { label: '专业高效', value: '专业高效' },
    { label: '亲切温和', value: '亲切温和' },
    { label: '幽默活泼', value: '幽默活泼' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          客服回复生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              questionType: '产品咨询',
              replyStyle: '热情友好',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="questionType"
                  label="问题类型"
                  rules={[{ required: true, message: '请选择问题类型' }]}
                >
                  <div ref={questionTypeRef}>
                    <Select placeholder="请选择问题类型" options={questionTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="replyStyle"
                  label="回复风格"
                  rules={[{ required: true, message: '请选择回复风格' }]}
                >
                  <div ref={replyStyleRef}>
                    <Select placeholder="请选择回复风格" options={replyStyleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="customerQuestion"
                  label="客户问题（可选）"
                >
                  <div ref={customerQuestionRef}>
                    <TextArea rows={4} placeholder="请输入客户的具体问题，如不填写将根据问题类型自动生成回复" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productName"
                  label="产品名称（可选）"
                >
                  <div ref={productNameRef}>
                    <Input placeholder="请输入相关产品名称，如不填写则不包含具体产品信息" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="specialRequirements"
                  label="特殊要求（可选）"
                >
                  <Input placeholder="请输入特殊要求，如优惠信息、道歉声明等，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成客服回复'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}